<template>
    <div class="use-next-layout group/body">
        <BaHeader/>
        <el-container class="index-container ">
            <el-main class="main main-content">
                <div class="main-container home-page">
                    <template v-for="(secitem, secinx) in sections" :key="secinx">
                        <header v-if="secitem.id==1" class="style_wap-content__D2eqy block md:!hidden swiper relative w-full section-header">
                            <div class="absolute top-7 inset-x-0 text-center z-2">
                                <div  class="inline-flex mb-6 md:mb-8 text-heading rounded-full p-0.5 bg-white/60" style="background-color: rgba(255,255,255,1);">
                                    <template v-for="(iteminfo, index) in secitem.sectioninfo" :key="index">
                                        <button v-if="iteminfo.tags=='left'"
                                                @click="HandleSlideChange(index, 'mob')"
                                                type="button"
                                                :class="index==sectiononeMob?' text-white sectab-onebg':' text-heading'"
                                                class="reset-button px-3 py-2 rounded-full font-medium text-sm md:text-base hover:text-white hover:bg-black transition-all  last:mr-0 xr-title">
                                            {{ iteminfo.title }}
                                        </button>
                                    </template>
                                </div>
                            </div>
                            <swiper
                                :modules="modules"
                                :slides-per-view="1"
                                :loop="false"
                                :autoplay="{ delay: 4500, disableOnInteraction: false }"
                                :effect="'fade'"
                                @swiper="onSwiper($event,'mob')"
                                @slideChange="onSlideChange($event, 'mob')"
                            >
                                <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                    <swiper-slide :data-item="item.title" v-if="item.tags=='left'">
                                        <img :src="item.domain_mob_image" :alt="item.title"/>
                                        <div class="absolute inset-x-0 bottom-20 text-center" style="min-height: 10rem;">
                                            <h1 class="text-[22px] mb-4 leading-snug text-white font-semibold">
                                                {{ item.describe }}
                                            </h1>
                                            <p class="text-white text-sm mb-4">
                                                {{ item.describe_two }}
                                            </p>
                                            <nuxt-link  target="_blank" to="https://console.super-aiagent.com/#/manystores/login?type=register">
                                                <button type="button" @click="mobFreeHandle"
                                                        class="reset-button rounded-full bg-white text-sm py-1.5 px-5">免费试用
                                                </button>
                                            </nuxt-link>
                                        </div>
                                    </swiper-slide>
                                </template>
                            </swiper>
                        </header>
                        <section v-if="secitem.id==1" :data-secion="secitem.secitem_name" class="zui-layout-section style_bg___Yw3l hidden md:block relative section-main1" >
                            <div class="zui-layout zui-layout-row zui-layout-responsive section-topone">
                                <div class="py-10 lg:pt-24 lg:pb-0 z-20 style_content__qTBJD md:pr-4 flex-auto scoll-text">
                                    <div class="inline-flex mb-6 md:mb-8 bg-white text-heading rounded-full p-0.5">
                                        <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                            <button v-if="item.tags=='left'"
                                                    type="button"
                                                    @click="HandleSlideChange(index, 'pc')"
                                                    :class="index==sectiononeLeft?' text-white bg-black sectab-onebg':' text-heading'"
                                                    class="reset-button px-5 py-2 rounded-full font-medium text-sm md:text-base hover:text-white hover:bg-black sectab-onebg-hover transition-all mr-0.5 last:mr-0 "
                                            >
                                                {{ item.title }}
                                            </button>
                                        </template>
                                    </div>
                                    <div class="flex flex-col mb-10 md:mb-13" aria-hidden="true">
                                        <swiper
                                            class="mb-4 sm:mb-6 h-16 md:h-20 xl:h-32 w-full"
                                            :modules="modules"
                                            :slides-per-view="1"
                                            :loop="false"
                                            :autoplay="{ delay: 5000, disableOnInteraction: false }"
                                            :effect="'fade'"
                                            @swiper="onSwiper($event,'pc')"
                                            :direction="'vertical'"
                                            @slideChange="onSlideChange($event, 'pc')"
                                        >
                                            <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                                <swiper-slide :data-item="item.title" v-if="item.tags=='left'">
                                                    <div
                                                        class="text-2xl text-heading !leading-snug md:text-3xl xl:text-5xl whitespace-nowrap transition-all h-full font-semibold text-white"
                                                        style=" white-space: pre-wrap;" v-html="item.describe">
                                                    </div>
                                                </swiper-slide>
                                            </template>
                                        </swiper>
                                        <p class="text-xs md:text-base text-heading whitespace-pre-wrap leading-[22px] md:leading-7 h-11 md:h-14">
                                            <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                                <span :class="index==sectiononeLeft?' block':'hidden'" style="color:#ffffff"
                                                      v-if="item.tags=='left'" v-html="item.describe_two">
                                                </span>
                                            </template>
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap">
                                        <div class="hidden md:block">
                                            <div class="zui-button-group zui-button-group-medium">
                                                <nuxt-link  target="_blank" to="https://console.super-aiagent.com/#/manystores/login?type=register">
                                                <button type="button" class="zui-button zui-button-primary zui-button-large bg-white" style="color:#2441BF;margin-right: 10px">免费试用 </button>
                                                </nuxt-link>
                                                <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                                    <a :class="index==sectiononeLeft?'':'hidden'"
                                                       v-if="item.tags=='left'&&index==sectiononeLeft" class="zui-button zui-button-primary zui-button-large zui-button-outline" style="border:1px solid #ffffff;color: #fff;background-color:#2441BF"
                                                       href="#reserveform" :title="item.title">获取方案</a>
                                                </template>
                                            </div>
                                            <p class="mt-3.5 text-normal" v-if="false" style="color:#ffffff">
                                                或致电咨询: <a class="text-inherit" :href="'tel:'+siteConfig.telephone">{{ siteConfig.telephone }}</a>
                                            </p>
                                        </div>
                                        <form class="relative  max-w-96" v-if="false">
                                            <div class="relative overflow-hidden block w-full">
                                                <input
                                                    type="tel"
                                                    maxlength="11"
                                                    name="mobile"
                                                    placeholder="请输入您的手机号码"
                                                    autocomplete="tel-local"
                                                    class="w-full px-6 h-[54px] rounded-full border outline-none border-[#BBC8FF] border-solid text-base placeholder:text-disabled select-auto bg-white autofill:shadow-[0_0_0_60px_#FFF_inset] focus-visible:outline-none"
                                                    value=""
                                                /><span
                                                class="zui-typography flex h-5 px-6 items-center zui-typography-danger"></span>
                                            </div>
                                            <a  target="_blank" to="https://console.super-aiagent.com/#/manystores/login?type=register">
                                                <button
                                                    type="submit"
                                                    class="text-white bg-black cursor-pointer hover:opacity-80 text-base font-medium leading-none w-full h-[54px] mb-3 border-none outline-none rounded-full disabled:bg-disabled disabled:hover:opacity-100 disabled:cursor-not-allowed"
                                                >
                                                    免费试用
                                                </button>
                                            </a>
                                            <p class="text-xs">或致电咨询: <a href="tel:0571-8685 7988">0571-8685
                                                7988</a></p>
                                        </form>
                                    </div>
                                </div>
                                <div class="style_track-visible__Z7Ny8 hidden md:flex max-h-96 lg:max-h-[700px] overflow-hidden ml-auto">
                                    <div v-if="sectiontwo.includes('right0')"
                                        class="transition-all flex flex-col pt-6 will-change-transform w-[194px] [zoom:0.9] xl:[zoom:1]"
                                        style="margin-top: 20px">
                                        <vue-marquee-slider id="marquee-slider" vertical :speed="300000">
                                            <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                                <a :data-item="item.title" v-if="item.tags=='right0'"
                                                   :href="fiterJumpurl(item.jumpurl)" :title="item.title">
                                                    <div
                                                        class="relative w-full rounded-2xl overflow-hidden flex-shrink-0 cursor-pointer">
                                                        <img style="    min-width: 182px;"
                                                             class="w-full"
                                                             :src="item.domain_image"
                                                             :alt="item.title"
                                                        />
                                                        <img style="    min-width: 182px;" v-if="item.icon_image"
                                                             class="absolute z-0 inset-0 opacity-0 hover:opacity-100 transition-all"
                                                             :src="item.domain_icon_image"
                                                             :alt="item.title"
                                                        />
                                                    </div>
                                                    <div
                                                        class="relative flex-shrink-0 flex items-center w-full p-4 rounded-2xl overflow-hidden bg-white cursor-pointer"
                                                    >
                                                        <div>
                                                            <span class="font-semibold">{{ item.title }}</span>
                                                            <p class="mt-1 mb-0 text-xs whitespace-nowrap"
                                                               v-html="item.describe"></p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </template>
                                        </vue-marquee-slider>
                                    </div>
                                    <div v-if="sectiontwo.includes('right1')"
                                        class="transition-all flex flex-col pt-6 will-change-transform w-[194px] [zoom:0.9] xl:[zoom:1]"
                                        style="margin-top: 0">
                                        <vue-marquee-slider id="marquee-slider2" vertical :speed="450000">
                                            <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                                <a :data-item="item.title" v-if="item.tags=='right1'"
                                                   :href="fiterJumpurl(item.jumpurl)" :title="item.title">
                                                    <div  class="relative w-full rounded-2xl overflow-hidden flex-shrink-0 cursor-pointer">
                                                        <img style="    min-width: 182px;"
                                                             class="w-full"
                                                             :src="item.domain_image"
                                                             :alt="item.title"
                                                        />
                                                        <img  style="min-width: 182px;" v-if="item.icon_image"
                                                             class="absolute z-0 inset-0 opacity-0 hover:opacity-100 transition-all"
                                                             :src="item.domain_icon_image"
                                                             :alt="item.title"
                                                        />
                                                    </div>
                                                    <div
                                                        class="relative flex-shrink-0 flex items-center w-full p-4 rounded-2xl overflow-hidden bg-white cursor-pointer">
                                                        <div>
                                                            <span class="font-semibold">{{ item.title }}</span>
                                                            <p class="mt-1 mb-0 text-xs whitespace-nowrap"
                                                               v-html="item.describe"></p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </template>
                                        </vue-marquee-slider>
                                    </div>
                                    <div v-if="sectiontwo.includes('right2')"
                                        class="transition-all flex flex-col pt-6 will-change-transform w-[194px] [zoom:0.9] xl:[zoom:1]"
                                        style="margin-top: 40px"
                                    >
                                        <vue-marquee-slider id="marquee-slider3" vertical :speed="400000">
                                            <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                                <a :data-item="item.title" v-if="item.tags=='right2'"
                                                   :href="fiterJumpurl(item.jumpurl)" :title="item.title">
                                                    <div
                                                        class="relative w-full rounded-2xl overflow-hidden flex-shrink-0 cursor-pointer">
                                                        <img style="    min-width: 182px;"
                                                             class="w-full"
                                                             :src="item.domain_image"
                                                             :alt="item.title"
                                                        />
                                                        <img
                                                            style="    min-width: 182px;"
                                                            class="absolute z-0 inset-0 opacity-0 hover:opacity-100 transition-all"
                                                            :src="item.domain_icon_image"
                                                            v-if="item.icon_image"
                                                            :alt="item.title"
                                                        />
                                                    </div>
                                                    <div
                                                        class="relative flex-shrink-0 flex items-center w-full p-4 rounded-2xl overflow-hidden bg-white cursor-pointer"
                                                    >
                                                        <div>
                                                            <span class="font-semibold">{{ item.title }}</span>
                                                            <p class="mt-1 mb-0 text-xs whitespace-nowrap"
                                                               v-html="item.describe"></p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </template>
                                        </vue-marquee-slider>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section v-else-if="secitem.id==10" :data-secion="secitem.secitem_name"
                                 class="relative -mt-10 bg-white rounded-4xl pt-8 md:hidden z-2 section-main10">
                            <div class="max-w-c mx-auto px-c">
                                <div class="flex items-center mb-8 justify-evenly *:flex-1 *:max-w-40 gap-x-3">
                                    <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                        <a  v-if="item.tags=='top'" :href="fiterJumpurl(item.jumpurl)" :title="item.title" class="flex items-center">
                                            <div class="flex-1 ml-auto">
                                                <strong class="text-heading">{{item.title}}</strong>
                                                <p class="text-disabled text-xs mt-1">{{item.describe}}</p>
                                            </div>
                                            <img  width="70" alt="" :src="item.domain_mob_image"/>
                                        </a>
                                    </template>
                                </div>
                                <div class="grid grid-cols-5 justify-center gap-y-3.5 gap-x-5">
                                    <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                        <a :data-item="item.title" v-if="item.tags=='bottom'" :href="fiterJumpurl(secitem.jumpurl)" class="block text-center">
                                            <img :src="item.domain_mob_image" class="w-full rounded-xl"/><span class="text-heading text-xs whitespace-nowrap mt-2.5">{{item.title}}</span>
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </section>
                        <section v-else-if="secitem.id==2" :data-secion="secitem.secitem_name" class="mt-30 lg:mt-36 overflow-hidden section-main2">
                            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug text-[#1D1D1F] max-w-c mx-auto px-c mb-3 sm:mb-6 lg:mb-8">
                                <a :href="fiterJumpurl(secitem.jumpurl)" class="!text-inherit">
                                    <span class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">
                                        {{ secitem.name }}
                                    </span>
                                    <br class="sm:hidden"/>{{ secitem.name_two }}
                                </a>
                            </h2>
                            <p class="max-w-c mx-auto px-c mb-13 lg:mb-15 lg:mt-7 text-heading md:text-normal text-sm leading-loose sm:text-base lg:text-lg">
                                {{ secitem.describe }}
                            </p>
                            <div class="mx-auto px-c swiper-initialized swiper-horizontal ai-study-section">
                                <swiper
                                    :modules="modules"
                                    :slides-per-view="isMobileDevice?1:4.5"
                                    :loop="true"
                                    :autoplay="{ delay: 5000, disableOnInteraction: false }"
                                    :effect="'fade'"
                                    @swiper="onSwiper($event,'aistudy')"
                                    @slideChange="onSlideChange($event, 'aistudy')"
                                >
                                    <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                        <swiper-slide  class=" max-w-[calc(100vw-32px)] xs:max-w-96 lg:max-w-[590px] mr-6 last:!mr-0 rounded-2xl overflow-hidden">
                                            <div class="h-full *:w-full *:h-full">
                                                <img :src="item.domain_mob_image" loading="lazy" alt="" class="lg:hidden"/>
                                                <img :src="item.domain_image" loading="lazy" alt="" class="hidden lg:block"/>
                                            </div>
                                            <div class="absolute inset-0 p-7 sm:p-11 flex flex-col text-[#1D1D1F]">
                                                <h3 class="text-xl sm:text-2xl lg:text-4xl mb-2 lg:mb-3 font-semibold">  {{ item.title }}</h3>
                                                <p class="text-sm lg:text-lg" v-html="item.describe"></p>
                                                <div class="mt-auto flex items-center" v-if="false">
                                                    <a
:href="fiterJumpurl(item.jumpurl)" :title="item.title"
                                                        class="reset-button bg-white text-[#1D1D1F] hover:text-[#1D1D1F] hover:bg-white/90 active:text-[#1D1D1F] active:bg-white/95 text-base py-1 px-3 sm:py-2 sm:px-4 rounded-full"
                                                    >立即抢注</a>
                                                    <a href="/marketing/find-customers">如何获得客户<i
role="img" aria-label="right"
                                                                    class="zui-icon zenticon zenticon-right"
                                                                    style="font-weight: 600"></i></a>
                                                </div>
                                            </div>
                                        </swiper-slide>
                                    </template>
                                </swiper>
                                <div class="flex mt-8 bookpage-btn"  >
                                    <button type="button" @click="HandleSlideChange(sectiononeStudy-1, 'aistudy')"
                                        data-navigation="prev"
                                        class="reset-button size-9 rounded-full bg-contain bg-[--background] text-black hover:bg-[#D2D2D7] active:bg-[#D2D2D7] disabled:text-black/50 disabled:cursor-not-allowed disabled:bg-[--background]">
                                        <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px">
                                            <svg
                                                width="36px"
                                                height="36px"
                                                viewBox="0 0 36 36"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                            >
                                                <path
                                                    d="M21.559 12.062L15.618 17.984L21.5221 23.944C22.105 24.533 22.1021 25.482 21.5131 26.065C21.2211 26.355 20.8391 26.5 20.4571 26.5C20.0711 26.5 19.6851 26.352 19.3921 26.056L12.4351 19.034C11.8531 18.446 11.8551 17.5 12.4411 16.916L19.4411 9.938C20.0261 9.353 20.9781 9.354 21.5621 9.941C22.1471 10.528 22.145 11.478 21.559 12.062Z"
                                                    fill="currentColor"
                                                ></path>
                                            </svg>
                                        </i>
                                    </button>
                                    <button type="button" @click="HandleSlideChange(sectiononeStudy+1, 'aistudy')"
                                        data-navigation="next" class="reset-button size-9 ml-4 rounded-full bg-contain bg-[--background] text-black hover:bg-[#D2D2D7] active:bg-[#D2D2D7] disabled:text-black/50 disabled:cursor-not-allowed disabled:bg-[--background]">
                                        <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px">
                                            <svg
                                                width="36px"
                                                height="36px"
                                                viewBox="0 0 36 36"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                            >
                                                <path
                                                    d="M23.5587 16.916C24.1447 17.5 24.1467 18.446 23.5647 19.034L16.6077 26.056C16.3147 26.352 15.9287 26.5 15.5427 26.5C15.1607 26.5 14.7787 26.355 14.4867 26.065C13.8977 25.482 13.8947 24.533 14.4777 23.944L20.3818 17.984L14.4408 12.062C13.8548 11.478 13.8528 10.5279 14.4378 9.941C15.0218 9.354 15.9738 9.353 16.5588 9.938L23.5587 16.916Z"
                                                    fill="currentColor"
                                                ></path>
                                            </svg>
                                        </i>
                                    </button>
                                    <button type="button" @click="HandleSlideChange('stop', 'aistudy')"  class="reset-button size-9 ml-4 rounded-full bg-contain bg-[--background] text-black hover:bg-[#D2D2D7] active:bg-[#D2D2D7] disabled:text-black/50 disabled:cursor-not-allowed disabled:bg-[--background]"
                                    >
                                        <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px">
                                            <svg
                                                width="36px"
                                                height="36px"
                                                viewBox="0 0 36 36"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                            >
                                                <g clip-path="url(#clip0_29_1142)" fill="currentColor">
                                                    <rect x="12" y="11" width="3" height="14" rx="1.5"></rect>
                                                    <rect x="21" y="11" width="3" height="14" rx="1.5"></rect>
                                                </g>
                                            </svg>
                                        </i>
                                    </button>
                                </div>
                            </div>
                        </section>
                        <section v-else-if="secitem.id==3" :data-secion="secitem.secitem_name"
                                 class="mt-30 lg:mt-36 overflow-hidden section-main3">
                            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug text-[#1D1D1F] max-w-c mx-auto px-c mb-3 sm:mb-6 lg:mb-8">
                                <a :href="fiterJumpurl(secitem.jumpurl)" class="!text-inherit">
                                    <span class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">{{ secitem.name }}</span>
                                    {{ secitem.name_two }}
                                </a>
                            </h2>
                            <p class="max-w-c mx-auto px-c mt-3 mb-13 lg:mt-7 text-heading md:text-normal text-sm leading-loose sm:text-base lg:text-lg">
                                {{ secitem.describe }}
                            </p>
                            <div v-if="isMobileDevice === true"
                                 class="max-w-c mx-auto px-c swiper-initialized swiper-horizontal">
                                <swiper
                                    :modules="modules"
                                    :slides-per-view="1"
                                    :space-between="20"
                                    :loop="false"
                                    :autoplay="{ delay: 5000, disableOnInteraction: true }"
                                    :effect="'fade'"
                                    @swiper="onSwiper($event, 'channel')"
                                    @slideChange="onSlideChange($event, 'channel')"
                                >
                                    <swiper-slide v-for="(item, index) in secitem.sectioninfo" :key="index"
                                                  class="!h-auto max-w-[calc(100vw-32px)] xs:max-w-sm lg:max-w-none mr-6 last:mr-0 lg:mr-9 xl:mr-10 rounded-2xl overflow-hidden"
                                    >
                                        <img
                                            :src="isMobileDevice==true?item.domain_mob_image:item.domain_image"
                                            loading="lazy"
                                            alt=""
                                            class="h-full w-full object-center object-cover"
                                        />
                                        <div class="lg:hidden absolute inset-0 p-7 sm:p-11 flex flex-col text-white">
                                            <h3 class="text-xl sm:text-2xl lg:text-4xl mb-2 lg:mb-3 font-semibold">
                                                {{ item.title }}</h3>
                                            <p class="text-sm lg:text-lg">
                                                {{ item.describe }}
                                            </p>
                                            <div class="mt-auto">
                                                <a :href="fiterJumpurl(item.jumpurl)" :title="item.title" class="flex items-center text-inherit text-base ml-3 hover:text-inherit hover:opacity-90">{{ item.title }}
                                                    <i  role="img" aria-label="right" class="zui-icon zenticon zenticon-right" style="font-weight: 600"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </swiper-slide>
                                </swiper>
                                <div class="flex mt-8 lg:hidden" style="--background: rgba(210, 210, 215, 0.64);justify-content: center;">
                                    <button
                                        type="button"  @click.stop="HandleSlideChange(sectionChannel-1, 'channel')"
                                        data-navigation="prev"
                                        class="reset-button size-9 rounded-full bg-contain bg-[--background] text-black hover:bg-[#D2D2D7] active:bg-[#D2D2D7] disabled:text-black/50 disabled:cursor-not-allowed disabled:bg-[--background]"
                                    ><i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;"><svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.559 12.062L15.618 17.984L21.5221 23.944C22.105 24.533 22.1021 25.482 21.5131 26.065C21.2211 26.355 20.8391 26.5 20.4571 26.5C20.0711 26.5 19.6851 26.352 19.3921 26.056L12.4351 19.034C11.8531 18.446 11.8551 17.5 12.4411 16.916L19.4411 9.938C20.0261 9.353 20.9781 9.354 21.5621 9.941C22.1471 10.528 22.145 11.478 21.559 12.062Z" fill="currentColor"></path></svg></i></button>
                                    <button
                                        type="button" @click.stop="HandleSlideChange(sectionChannel+1, 'channel')"
                                        data-navigation="next"
                                        class="reset-button size-9 ml-4 rounded-full bg-contain bg-[--background] text-black hover:bg-[#D2D2D7] active:bg-[#D2D2D7] disabled:text-black/50 disabled:cursor-not-allowed disabled:bg-[--background]"><i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;"><svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23.5587 16.916C24.1447 17.5 24.1467 18.446 23.5647 19.034L16.6077 26.056C16.3147 26.352 15.9287 26.5 15.5427 26.5C15.1607 26.5 14.7787 26.355 14.4867 26.065C13.8977 25.482 13.8947 24.533 14.4777 23.944L20.3818 17.984L14.4408 12.062C13.8548 11.478 13.8528 10.5279 14.4378 9.941C15.0218 9.354 15.9738 9.353 16.5588 9.938L23.5587 16.916Z" fill="currentColor"></path></svg></i></button>
                                </div>
                            </div>
                            <div v-else   class="hidden lg:block overflow-hidden max-w-c mx-auto px-c ">
                                <swiper
                                    :modules="modules"
                                    :slides-per-view="1"
                                    :loop="false"
                                    :autoplay="{ delay: 5000, disableOnInteraction: false }"
                                    :effect="'fade'"
                                    @swiper="onSwiper($event, 'channel')"
                                    @slideChange="onSlideChange($event, 'channel')"
                                >
                                    <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                        <swiper-slide class=" !h-auto max-w-[calc(100vw-32px)] xs:max-w-sm lg:max-w-none rounded-2xl overflow-hidden ">
                                            <img :src="item.domain_image" loading="lazy" style="max-height: 536px;"
                                                 alt="" class="h-full w-full object-cover object-center"/>
                                        </swiper-slide>
                                    </template>
                                </swiper>
                                <div class="hidden lg:flex mt-13 *:py-10 *:flex-1 space-x-15 style_triggers__0n7s7 swiper-pagination-custom swiper-pagination-horizontal">
                                   <template  v-for="(item, chanink) in secitem.sectioninfo" :key="chanink">
                                       <div @click.stop="HandleSlideChange(chanink, 'channel')"
                                         class="group/card cursor-pointer style_trigger-item__hmD8S "
                                         :class="sectionChannel==chanink?'':' style_trigger-animation__l5RMx'"
                                         :data-active="sectionChannel==chanink?true:false">
                                            <h3 class="text-2.2xl leading-none mb-2.5 font-medium text-secondary group-hover/card:text-heading group-data-[active=true]/card:text-heading">{{ item.title }}</h3>
                                            <p class="text-base text-normal mb-3 min-h-24 xl:min-h-18 xl:mb-5 description" v-html="item.describe"></p>
                                            <a class="flex items-center text-base" :href="fiterJumpurl(item.jumpurl)" :title="item.title">
                                                点我了解更多详情，获取优惠
                                                <i role="img" aria-label="right"   class="zui-icon zenticon zenticon-right" style="font-weight: 600"></i>
                                            </a>
                                        </div>
                                   </template>
                                </div>
                            </div>
                        </section>
                        <section v-else-if="secitem.id==4" :data-secion="secitem.secitem_name"
                                 class="pt-14 overflow-hidden section-main4">
                            <p
                                class="text-lg xl:text-3xl font-medium mb-1 xl:mb-4 !leading-normal max-w-c mx-auto px-c xl:group-data-assistant-expanded/root:text-2xl 2xl:group-data-assistant-expanded/root:text-3xl"
                                style="color: #9c9c9c">
                                <a class="text-normal" style="color: #9C9C9C;" :href="fiterJumpurl(secitem.jumpurl)"
                                   v-html="secitem.describe"></a>
                            </p>
                        </section>
                        <section v-else-if="secitem.id==5" :data-secion="secitem.secitem_name" data-seciont="hellow"
                                 class="lg:pt-36 overflow-hidden style_solution__3RYQk section-main5">
                            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug mb-13 text-[#1D1D1F] max-w-c mx-auto px-c">
                                <a :href="fiterJumpurl(secitem.jumpurl)" class="!text-inherit" >
                                    <span class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">{{secitem.name}}</span>
                                    <span v-html="secitem.name_two"></span>
                                </a>
                            </h2>
                            <dl class="container mx-auto px-c hidden lg:flex items-stretch justify-between mb-13 *:flex-1 *:relative *:bg-white *:rounded-2xl space-x-5 xl:space-x-7">
                                <a :href="fiterJumpurl(item.jumpurl)" :title="item.title" v-for="(item, index) in secitem.sectioninfo"
                                   :key="index" class="style_trigger-solution__KaoJe group/item flex overflow-hidden">
                                    <img
                                        :src="item.domain_image"
                                        role="presentation"
                                        loading="lazy"
                                        alt=""
                                        class="flex-1 group-hover/item:scale-105 origin-center transition-transform ease-linear"
                                    />
                                    <div class="absolute inset-0 z-1 flex flex-col justify-center pl-9">
                                        <dt class="text-2xl mb-1.5 font-medium">{{ item.title }}</dt>
                                        <dd class="text-base">{{ item.describe }}</dd>
                                    </div>
                                </a>
                            </dl>
                        </section>
                        <section v-else-if="secitem.id==6" :data-secion="secitem.secitem_name" class="pt-30 lg:pt-36 overflow-hidden style_solution__3RYQk section-main6" id="application">
                            <div role="tablist" id="solution" class="hidden   lg:flex items-center justify-center mb-11 ">
                                <button type="button" v-for="(item, index) in secitem.sectioninfo" :key="index" @click="HandleSlideChange(index, 'solution')"
                                        role="tab"  :tabindex="sectionSolution==index?0:-1"
                                        :aria-controls="'solution-'+item.title"
                                        :aria-selected="sectionSolution==index"
                                        class="reset-button px-9 py-3 text-normal font-semibold text-base rounded-full aria-selected:bg-black aria-selected:text-white sectab-onebg-hover">{{ item.title }}
                                </button>
                            </div>
                            <div  class="max-w-c mx-auto px-c ">
                                <swiper class=" items-stretch lg:!transform-none"
                                        :modules="modules"
                                        :slides-per-view="1"
                                        :autoplay="{ delay: 60000, disableOnInteraction: false }"
                                        :effect="'fade'"
                                        :nested="true"
                                        @swiper="onSwiper($event,'solution')"
                                        @slideChange="onSlideChange($event, 'solution')">
                                        <swiper-slide v-for="(item, inkk) in secitem.sectioninfo" :key="inkk" :id="'solution-'+item.title" class="!h-auto max-w-[calc(100vw-32px)] xs:max-w-sm lg:max-w-none">
                                            <div class="h-full flex flex-col lg:items-stretch lg:flex-row rounded-2xl overflow-hidden">
                                                <div
                                                    class="lg:w-5/12 lg:h-full *:h-full *:w-full *:object-cover *:object-center">
                                                    <img :src="item.domain_mob_image" alt="" class="block lg:hidden"/>
                                                    <img :src="item.domain_image" alt="" class="hidden lg:block"/>
                                                </div>
                                                <div
                                                    class="text-white flex-1 lg:-ml-px py-7 px-8 lg:px-12 flex flex-col lg:justify-center items-start 2xl:-mt-8 style_item-content__XQhLM">
                                                    <h3 class="text-base sm:text-lg lg:text-2.2xl font-semibold mb-4 lg:mb-6 flex items-start style_item-title__Y05vP"
                                                    >{{ item.describe }}</h3>
                                                    <p class="text-xs sm:text-sm lg:text-base mb-3 md:mb-5" v-html="item.describe_two"></p>
                                                    <div class="my-auto lg:my-0" v-if="item.keyarray.length>0">
                                                        <p class="text-xs md:text-base lg:text-lg font-semibold mb-3 lg:mb-4">
                                                            方案包含以下产品：</p>
                                                        <div class="style_item-functions__kLtiZ">
                                                            <a v-for="(itarr,ink) in item.keyarray" :key="ink"
                                                               class="style_item-function__5cASh"
                                                               :href="fiterJumpurl(itarr.key)"
                                                            >{{ itarr.value }}</a>
                                                        </div>
                                                    </div>
                                                    <a :href="fiterJumpurl(item.jumpurl)" :title="item.title" class="reset-button !text-normal bg-white hover:bg-white/90 active:bg-white/90 rounded-full py-2 px-4 lg:py-3.5 lg:px-9 text-sm sm:text-base lg:text-xl font-medium mt-4 md:mt-6">了解详情</a>
                                                </div>
                                            </div>
                                        </swiper-slide>
                                </swiper>
                                <div class="flex mt-8 lg:hidden" style="justify-content: center;    margin-bottom: 20px;">
                                    <button type="button" data-navigation="prev" @click="onSlideChange(sectionSolution-1, 'solution')" class="reset-button size-9 rounded-full bg-contain bg-white text-black hover:bg-white/90 active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed">
                                        <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;">
                                            <svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.559 12.062L15.618 17.984L21.5221 23.944C22.105 24.533 22.1021 25.482 21.5131 26.065C21.2211 26.355 20.8391 26.5 20.4571 26.5C20.0711 26.5 19.6851 26.352 19.3921 26.056L12.4351 19.034C11.8531 18.446 11.8551 17.5 12.4411 16.916L19.4411 9.938C20.0261 9.353 20.9781 9.354 21.5621 9.941C22.1471 10.528 22.145 11.478 21.559 12.062Z" fill="currentColor"></path></svg>
                                        </i>
                                    </button>
                                    <button  type="button" @click="onSlideChange(sectionSolution+1, 'solution')"  data-navigation="next" class="reset-button size-9 ml-4 rounded-full bg-contain bg-white text-black active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed">
                                        <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;">
                                            <svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23.5587 16.916C24.1447 17.5 24.1467 18.446 23.5647 19.034L16.6077 26.056C16.3147 26.352 15.9287 26.5 15.5427 26.5C15.1607 26.5 14.7787 26.355 14.4867 26.065C13.8977 25.482 13.8947 24.533 14.4777 23.944L20.3818 17.984L14.4408 12.062C13.8548 11.478 13.8528 10.5279 14.4378 9.941C15.0218 9.354 15.9738 9.353 16.5588 9.938L23.5587 16.916Z" fill="currentColor"></path></svg>
                                        </i>
                                    </button>
                                </div>
                            </div>
                        </section>
                        <section v-else-if="secitem.id==7" :data-secion="secitem.secitem_name"
                                 class="py-30 lg:py-36 overflow-hidden style_service__8ui9O section-main7" id="personal">
                            <h2 id="service"  class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug mb-13 text-[#1D1D1F] max-w-c mx-auto px-c scroll-mt-20"
                            >
                                <a   :href="fiterJumpurl(secitem.jumpurl)" class="!text-inherit">
                                    <span class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">{{ secitem.name }}</span>
                                    <span v-html="secitem.name_two"></span>
                                </a>
                            </h2>
                            <div class="max-w-c mx-auto px-c">
                                <swiper class=" items-stretch xl:*:flex-1 xl:justify-between"
                                        :modules="modules"
                                        :slides-per-view="isMobileDevice==true?1:4"
                                        :loop="true"
                                        :space-between="50"
                                        :autoplay="{ delay: 4000, disableOnInteraction: false }"
                                        :effect="'fade'"
                                        @swiper="onSwiper($event, 'secservice')"
                                        @slideChange="onSlideChange($event, 'secservice')">
                                    <swiper-slide v-for="(item, index) in secitem.sectioninfo" :key="index">
                                        <li class=" min-h-[440px] sm:min-h-[480px] max-w-[calc(100vw-32px)] xs:max-w-72 xs:min-w-72 xl:min-w-[unset] xl:max-w-none bg-white rounded-2xl !flex flex-col items-start py-7 px-8 lg:py-9 mr-6 last:!mr-0">
                                            <img
                                                alt=""
                                                loading="lazy"
                                                :src="item.domain_icon_image"
                                                class="size-11 mb-4"
                                            />
                                            <h3 class="font-semibold text-heading text-xl">{{ item.title }}</h3>
                                            <p class="text-sm sm:text-base mb-6 sm:mb-8 min-h-15 xs:min-h-24 2xl:min-h-18"
                                               v-html="item.describe"></p>
                                            <ul class="list-none space-y-2" v-if="item.keyarray.length>0">
                                                <li v-for="(itarr,ink) in item.keyarray" :key="ink">
                                                    <a :href="fiterJumpurl(itarr.key)"
                                                       class="text-normal text-sm flex items-center">
                                                        <i role="img"
                                                            aria-label="check-circle-o"
                                                            class="zui-icon zenticon zenticon-check-circle-o text-primary text-sm mr-1.5"
                                                            style="font-weight: 600"></i>
                                                        {{ itarr.value }}
                                                    </a>
                                                </li>
                                            </ul>
                                            <button type="button" class="reset-button mt-auto mx-auto rounded-full text-sm py-1.5 px-5 sm:text-base sm:px-7 sm:py-2.5 sm:font-medium lg:text-xl lg:px-9 lg:py-3 sectab-onebg text-white hover:bg-black/80 active:bg-black/90">
                                                <a :href="fiterJumpurl(item.jumpurl)" :title="item.title" class="text-white">探索文档</a>
                                            </button>
                                        </li>
                                    </swiper-slide>
                                </swiper>
                                <div class="flex mt-8 xl:hidden" style=" justify-content: center;">
                                    <button @click="HandleSlideChange(sectionSecservice-1,'secservice')" type="button"
                                        data-navigation="prev"
                                        class="reset-button size-9 rounded-full bg-contain bg-white text-black hover:bg-white/90 active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed"
                                    ><i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;"><svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.559 12.062L15.618 17.984L21.5221 23.944C22.105 24.533 22.1021 25.482 21.5131 26.065C21.2211 26.355 20.8391 26.5 20.4571 26.5C20.0711 26.5 19.6851 26.352 19.3921 26.056L12.4351 19.034C11.8531 18.446 11.8551 17.5 12.4411 16.916L19.4411 9.938C20.0261 9.353 20.9781 9.354 21.5621 9.941C22.1471 10.528 22.145 11.478 21.559 12.062Z" fill="currentColor"></path></svg></i></button
                                    >
                                    <button @click="HandleSlideChange(sectionSecservice-1,'secservice')"
                                        type="button"
                                        data-navigation="next"
                                        class="reset-button size-9 ml-4 rounded-full bg-contain bg-white text-black active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed"
                                    ><i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;"><svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23.5587 16.916C24.1447 17.5 24.1467 18.446 23.5647 19.034L16.6077 26.056C16.3147 26.352 15.9287 26.5 15.5427 26.5C15.1607 26.5 14.7787 26.355 14.4867 26.065C13.8977 25.482 13.8947 24.533 14.4777 23.944L20.3818 17.984L14.4408 12.062C13.8548 11.478 13.8528 10.5279 14.4378 9.941C15.0218 9.354 15.9738 9.353 16.5588 9.938L23.5587 16.916Z" fill="currentColor"></path></svg></i></button>
                                </div>
                            </div>
                        </section>
                        <section v-else-if="secitem.id==8" :data-secion="secitem.secitem_name" class="max-w-c mx-auto px-c pb-30 lg:pb-36 section-main8">
                            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug mb-13 text-[#1D1D1F]">
                                <a
                                    :href="fiterJumpurl(secitem.jumpurl)">
                                    <span
                                        class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">{{ secitem.name }}</span>
                                    <span v-html="secitem.name_two"></span>
                                </a>
                            </h2>
                            <div class="flex flex-col">
                                <div class="flex flex-col sm:flex-row *:flex-1 mb-5 sm:mb-6 lg:mb-8 xl:*:max-h-[30vw]">
                                    <template v-for="(item, index) in secitem.sectioninfo" :key="index">
                                        <div v-if="index<=1"  class="relative overflow-hidden rounded-2xl mb-5 sm:mb-0 sm:mr-6 lg:mr-8 group/card cursor-pointer">
                                            <img  alt="" loading="lazy"  :src="item.domain_mob_image" class="sm:hidden" />
                                            <img alt="" loading="lazy"  :src="item.domain_image"  class="hidden sm:block group-hover/card:scale-105 origin-center transition-transform ease-linear"
                                        />
                                            <div class="absolute inset-0 z-1 pt-8 pl-8">
                                                <h3 class="font-semibold text-heading text-xl lg:text-2.2xl"
                                                    style="white-space: pre-wrap;" v-html="item.describe"></h3>
                                                <a
                                                    :href="fiterJumpurl(item.jumpurl)" :title="item.title"
                                                    :target="item.jumpurl?'_blank':''"
                                                    class="reset-button meta-card__trigger text-base lg:right-8 lg:bottom-8 group-hover/card:opacity-80 group-hover/card:text-white group-active/card:text-white "
                                                ><i role="img" aria-label="arrow" class="zui-icon" style="width: 1em; height: 1em;"><svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-705.000000, -5533.000000)" fill="currentColor" fill-rule="nonzero"><g transform="translate(639.000000, 5495.496000)"><g transform="translate(0.000000, 32.000000)"><g transform="translate(66.000000, 5.504000)"><path d="M13.9834448,7.99501586 C13.9816267,7.90015326 13.9629353,7.80647023 13.9283232,7.71874158 C13.9150202,7.69162425 13.8983388,7.66646441 13.8787137,7.64391729 C13.8539641,7.58682079 13.82045,7.53432841 13.7794948,7.48851302 L10.1635151,3.7070088 C9.98923145,3.52502461 9.73520753,3.45395169 9.49713166,3.52056253 C9.25905579,3.58717336 9.07309737,3.78134819 9.00930514,4.02994323 C8.9455129,4.27853826 9.01357841,4.54378601 9.18786204,4.72577021 L11.6297508,7.27555159 L2.68902051,7.27555159 C2.30848499,7.27555159 2,7.59766672 2,7.99501586 C2,8.39236501 2.30848499,8.71448013 2.68902051,8.71448013 L11.6297508,8.71448013 L9.18786204,11.2642615 C8.99216143,11.4736531 8.93612684,11.7853278 9.04577512,12.054575 C9.1554234,12.3238222 9.4092759,12.4979001 9.68946898,12.496 C9.87320561,12.4938502 10.0490179,12.4175303 10.1800516,12.2830229 L13.7960313,8.50151871 C13.9276192,8.36900499 14.0013484,8.18590107 14,7.99501586 L13.9834448,7.99501586 Z"></path></g></g></g></g></g></svg></i></a>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <div class="relative overflow-hidden rounded-2xl" v-if="secitem.sectioninfo.length==3">
                                    <img :alt="secitem.sectioninfo[2]['title']"  loading="lazy"   :src="secitem.sectioninfo[2]['domain_mob_image']"  class="sm:hidden"
                                    />
                                    <img :alt="secitem.sectioninfo[2]['title']"  loading="lazy" :src="secitem.sectioninfo[2]['domain_image']" class="hidden sm:block"/>
                                    <div
                                        class="absolute inset-0 z-1 pt-15 sm:pt-0 flex flex-col sm:justify-center items-center text-center">
                                        <img
                                            :alt="secitem.sectioninfo[2]['title']"
                                            loading="lazy"
                                            src="https://img01.yzcdn.cn/upload_files/2024/06/03/FpE3BmktsGg5e_2ETfAIQfbENUVU.png"
                                            class="size-16 mb-3 sm:mb-2"
                                        />
                                        <h3 class="font-semibold text-heading text-xl sm:text-3xl lg:text-4xl mb-3 sm:mb-6 lg:mb-8"
                                            style="white-space: pre-wrap;"
                                            v-html="secitem.sectioninfo[2].describe"></h3>
                                        <button @click="meetHandle()" type="button"  class="flex reset-button mx-auto rounded-full text-sm py-1.5 px-5 sm:text-base sm:px-7 sm:py-2.5 sm:font-medium lg:text-xl lg:px-9 lg:py-3 bg-black text-white hover:bg-black/80 active:bg-black/90"
                                        >
                                            立即体验
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <div v-if="secitem.id==9" class="overflow-hidden style_cases__NsQSd section-service section-main9" data-title="550强" >
                            <section>
                                <h2 class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug mb-13 text-[#1D1D1F] max-w-c mx-auto px-c">
                                    <a :href="fiterJumpurl(secitem.jumpurl)" class="!text-inherit">
                                        <span class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">{{ secitem.name }}</span>
                                        <span v-html="secitem.name_two"></span>
                                    </a>
                                </h2>
                                <div class="swiper !overflow-y-visible swiper-initialized swiper-horizontal" data-playing="true">
                                    <swiper :modules="modules"
                                        :slides-per-view="isMobileDevice==true?1.5:'auto'"
                                        :centered-slides="true"
                                        :loop="isMobileDevice==true?true:false"
                                        :space-between="20"
                                        :autoplay="{ delay:5500, disableOnInteraction: false }"
                                        @swiper="onSwiper($event, 'classic')"
                                        @slideChange="onSlideChange($event, 'classic')"
                                        class="swiper-container"
                                    >
                                        <swiper-slide v-for="(item, index) in secitem.sectioninfo" :key="index" class="!h-auto max-w-72 lg:max-w-96 mr-3 sm:mr-4 lg:mr-6 cursor-pointer bg-white rounded-2xl overflow-hidden transition-transform transform-gpu duration-300">
                                            <div class="slide-content">
                                                <a :href="fiterJumpurl(item.jumpurl)" :title="item.title"  class="h-full text-normal hover:text-normal active:text-normal " >
                                                    <picture style="display: block;">
                                                        <source type="image/webp" :srcset="item.domain_image">
                                                        <source type="image/jpeg" :srcset="item.domain_mob_image">
                                                        <img loading="lazy" style="max-height:216px" :alt="item.title" :src="item.domain_image">
                                                    </picture>
                                                    <div class="py-7 px-5 lg:py-10 lg:px-11">
                                                        <div
                                                            class="text-lg lg:text-2xl flex items-center mb-4 lg:mb-7 bg-no-repeat bg-left font-semibold">
                                                            <img v-if="item.icon_image"  :src="item.domain_icon_image"
                                                                 :alt="item.title" loading="lazy" class="size-7 lg:size-10 mr-2"/>{{ strTranTo(item.title, 0) }}
                                                            <span  class="text-xs sm:text-sm lg:text-base font-normal text-disabled inline-block ml-1.5 lg:ml-2 translate-y-0.5 lg:translate-y-1">|{{ strTranTo(item.title, 1) }}</span>
                                                        </div>
                                                        <h3 class="text-sm mb-1 lg:text-xl lg:mb-2">{{ item.describe }}</h3>
                                                        <p class="text-xs mb-4 sm:text-sm lg:text-base lg:mb-6 text-secondary"
                                                           v-html="item.describe_two">
                                                        </p>
                                                        <dl class="flex list-none *:flex-1" v-if="item.keyarray.length > 0">
                                                            <div class="flex flex-col-reverse"
                                                                 v-for="(itarr,ink) in item.keyarray" :key="ink">
                                                                <dt class="text-xs md:text-sm lg:text-base text-disabled font-normal">
                                                                    {{ itarr.value }}
                                                                </dt>
                                                                <dd class="text-xl sm:text-2xl lg:text-[28px] font-semibold mb-0.5">
                                                                    {{ strTranTo(itarr.key, 0) }}<span
                                                                    class="text-xs sm:text-sm pl-1">{{ strTranTo(itarr.key, 1) }}</span>
                                                                </dd>
                                                            </div>
                                                        </dl>
                                                    </div>
                                                </a>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                </div>
                                <div v-if="false" class="swiper !overflow-y-visible swiper-initialized swiper-horizontal" data-playing="true">
                                    <swiper :modules="modules"
                                            :space-between="20"
                                            :slides-per-view="isMobileDevice==true?1.4:4"
                                            :loop="true"
                                            :centeredSlides="true"
                                            :centered="true"
                                            :autoplay="{ delay:3000, disableOnInteraction: false }"
                                            :effect="'fade'"
                                            @swiper="onSwiper($event, 'classic')"
                                            @slideChange="onSlideChange($event, 'classic')">
                                            <swiper-slide v-for="(item, index) in secitem.sectioninfo" :key="index" aria-hidden="true" class="swiper-slide !h-auto max-w-72 lg:max-w-96 mr-3 sm:mr-4 lg:mr-6 cursor-pointer bg-white rounded-2xl overflow-hidden transition-transform transform-gpu duration-300">
                                                <a :href="fiterJumpurl(item.jumpurl)" :title="item.title"  class="h-full text-normal hover:text-normal active:text-normal " >
                                                    <picture style="display: block;">
                                                        <source type="image/webp" :srcset="item.domain_image">
                                                        <source type="image/jpeg" :srcset="item.domain_mob_image">
                                                        <img loading="lazy" style="max-height:216px" :alt="item.title" :src="item.domain_image">
                                                    </picture>
                                                    <div class="py-7 px-5 lg:py-10 lg:px-11">
                                                        <div
                                                            class="text-lg lg:text-2xl flex items-center mb-4 lg:mb-7 bg-no-repeat bg-left font-semibold">
                                                            <img v-if="item.icon_image"  :src="item.domain_icon_image"
                                                                 :alt="item.title" loading="lazy" class="size-7 lg:size-10 mr-2"/>{{ strTranTo(item.title, 0) }}
                                                            <span  class="text-xs sm:text-sm lg:text-base font-normal text-disabled inline-block ml-1.5 lg:ml-2 translate-y-0.5 lg:translate-y-1">|{{ strTranTo(item.title, 1) }}</span>
                                                        </div>
                                                        <h3 class="text-sm mb-1 lg:text-xl lg:mb-2">{{ item.describe }}</h3>
                                                        <p class="text-xs mb-4 sm:text-sm lg:text-base lg:mb-6 text-secondary"
                                                           v-html="item.describe_two">
                                                        </p>
                                                        <dl class="flex list-none *:flex-1" v-if="item.keyarray.length > 0">
                                                            <div class="flex flex-col-reverse"
                                                                 v-for="(itarr,ink) in item.keyarray" :key="ink">
                                                                <dt class="text-xs md:text-sm lg:text-base text-disabled font-normal">
                                                                    {{ itarr.value }}
                                                                </dt>
                                                                <dd class="text-xl sm:text-2xl lg:text-[28px] font-semibold mb-0.5">
                                                                    {{ strTranTo(itarr.key, 0) }}<span
                                                                    class="text-xs sm:text-sm pl-1">{{ strTranTo(itarr.key, 1) }}</span>
                                                                </dd>
                                                            </div>
                                                        </dl>
                                                    </div>
                                                </a>
                                            </swiper-slide>
                                        </swiper>
                                    <div class="flex mt-8  mx-auto px-c" style="justify-content: center;margin:50px 0;display:none;">
                                        <button type="button" @click="HandleSlideChange(sectionClassic-1,'classic')"
                                                data-navigation="prev"
                                                class="reset-button size-9 rounded-full bg-contain bg-white text-black hover:bg-white/90 active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed">
                                            <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;"><svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.559 12.062L15.618 17.984L21.5221 23.944C22.105 24.533 22.1021 25.482 21.5131 26.065C21.2211 26.355 20.8391 26.5 20.4571 26.5C20.0711 26.5 19.6851 26.352 19.3921 26.056L12.4351 19.034C11.8531 18.446 11.8551 17.5 12.4411 16.916L19.4411 9.938C20.0261 9.353 20.9781 9.354 21.5621 9.941C22.1471 10.528 22.145 11.478 21.559 12.062Z" fill="currentColor"></path></svg></i>
                                        </button>
                                        <button type="button" data-navigation="next" @click="HandleSlideChange(sectionClassic+1,'classic')"
                                                class="reset-button size-9 ml-4 rounded-full bg-contain bg-white text-black active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed">
                                            <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;"><svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23.5587 16.916C24.1447 17.5 24.1467 18.446 23.5647 19.034L16.6077 26.056C16.3147 26.352 15.9287 26.5 15.5427 26.5C15.1607 26.5 14.7787 26.355 14.4867 26.065C13.8977 25.482 13.8947 24.533 14.4777 23.944L20.3818 17.984L14.4408 12.062C13.8548 11.478 13.8528 10.5279 14.4378 9.941C15.0218 9.354 15.9738 9.353 16.5588 9.938L23.5587 16.916Z" fill="currentColor"></path></svg></i>
                                        </button>
                                        <button type="button" @click="HandleSlideChange(sectionClassic,'secservice')" class="hidden lg:block reset-button size-9 ml-4 rounded-full bg-contain bg-white text-black active:bg-white/90 disabled:text-black/50 disabled:cursor-not-allowed">
                                            <i role="img" aria-label="arrow" class="zui-icon" style="width: 36px; height: 36px;">
                                                <svg width="36px" height="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g clip-path="url(#clip0_29_1142)" fill="currentColor"><rect x="12" y="11" width="3" height="14" rx="1.5"></rect><rect x="21" y="11" width="3" height="14" rx="1.5"></rect></g></svg>
                                            </i>
                                        </button>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div v-if="secitem.id==13" class="overflow-hidden style_cases__NsQSd section-service2 section-main13" style="">
                            <section class="mt-30 lg:mt-36">
                                <h2 class="text-3xl lg:text-4xl xl:text-5xl font-semibold !leading-snug mb-13 text-[#1D1D1F] max-w-c mx-auto px-c">
                                <span
                                    class="text-lg lg:text-2xl xl:text-3xl mb-2 block font-medium">{{ secitem.name }}</span>
                                    <span v-html="secitem.name_two"></span>
                                </h2>
                                <div class="max-w-c mx-auto px-c">
                                    <ul class="grid grid-cols-2 sm:grid-cols-4 lg:flex list-none whitespace-pre-wrap fgap-3 sm:fgap-4 flex-wrap lg:flex-nowrap lg:*:flex-1">
                                        <li class="overflow-hidden rounded-2xl" style="background: #fff;"
                                            v-for="(item, index) in secitem.sectioninfo" :key="index">
                                            <a :href="fiterJumpurl(item.jumpurl)" :title="item.title"
                                               class="bg-white text-xs text-secondary flex flex-col items-center pt-4 pb-3 lg:pt-6 lg:pb-8 text-center">
                                                <img :src="item.domain_image"
                                                     loading="lazy"
                                                     :alt="item.title"
                                                     class="mb-3 lg:size-13 lg:mb-2.5 technology-icon"
                                                /><span class="text-xs sm:text-sm lg:text-base technology-title" style="padding: 15px 0;" v-html="item.describe"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </section>
                        </div>
                        <div v-else-if="secitem.id==14" class="moreCustomers_moduleContainer__69THv deep-ploughing section-service2 section-main14">
                            <div class="customWrap">
                                <div class="mainContent">
                                    <div class="mainTitleWrap"><span class="mainTitleText">{{ secitem.name }}</span>
                                    </div>
                                    <div class="tabsSwiper_moduleContainer__3zSXL">
                                        <div class="mainContent main-module">
                                            <div class="tabsCol">
                                                <div class="tab" v-for="(item, index) in secitem.sectioninfo"
                                                     :key="index" @click="HandleSlideChange(index, 'commerce')"
                                                     :class="index==sectionCommerce?' active':''">
                                                    <div class="nameRow"  >
                                                        <i class="icon-tab" v-if="item.icon_image"
                                                           :style="'background-image: url('+item.domain_icon_image+')'"></i>
                                                        <span class="tabNameText">{{ item.title }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper_moduleContainer__HNFuF">
                                                <swiper class="mySwiper"
                                                        :modules="modules"
                                                        :slides-per-view="1"
                                                        :loop="false"
                                                        :autoplay="{ delay: 3000, disableOnInteraction: false }"
                                                        :effect="'fade'"
                                                        :direction="isMobileDevice == true?'horizontal':'vertical'"
                                                        @swiper="onSwiper($event, 'commerce')"
                                                        @slideChange="onSlideChange($event, 'commerce')"
                                                >
                                                    <swiper-slide
:data-item="item.title"
                                                                  v-for="(item, index) in secitem.sectioninfo"
                                                                  :key="index">
                                                        <div
v-if="isMobileDevice == true"
                                                             class="slideItem_moduleContainer__Evlki"
                                                             :style="'background-image: url('+item.domain_mob_image+')'"></div>
                                                        <div
v-else
                                                             class="slideItem_moduleContainer__Evlki"
                                                             :style="'background-image: url('+item.domain_image+')'"></div>
                                                    </swiper-slide>
                                                </swiper>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <el-drawer
                    v-model="meetDrawer"
                    :title="siteConfig.siteName"
                    :direction="'ltr'"
                    :before-close="handleClose"
                >
                    <span>Hi, there!</span>
                </el-drawer>
            </el-main>
        </el-container>
        <BaFooter/>
    </div>
</template>
<script lang="ts" setup>
import {useSiteConfig} from '~/stores/siteConfig'
import {isMobile} from '~/utils/common'
import {VueMarqueeSlider} from '@/components/VueMarqueeSlider'
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Autoplay, Pagination, Navigation} from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import {ElMessageBox} from 'element-plus'

useSeoMeta({
    title: '首页',
})
const siteConfig = useSiteConfig()
const isMobileDevice = ref(isMobile())
let swiperObja: any
let swiperObjb: any
let swiperObjc: any
let swiperObjd: any
let swiperObje: any
let swiperObjf: any
let swiperObjj: any
let swiperObjk: any
let swiperObjl: any
const onSwiper = (swiper: any, type: string) => {
    switch (type) {
        case 'mob':
            swiperObja = swiper
            break;
        case 'pa':
            swiperObjb = swiper
            break;
        case 'aistudy':
            swiperObjd=swiper
            break;
        case 'pc':
            swiperObje = swiper
            break;
        case 'channel':
            swiperObjf = swiper
            break;
        case 'solution':
            swiperObjc = swiper
            break;
        case 'secservice':
            swiperObjk=swiper
        case 'commerce':
            swiperObjj= swiper
            break;
        case 'classic':
            swiperObjl=swiper
            break;
    }
}
const sectiononeLeft = ref(0)
const sectiononeMob = ref(0)
const sectiononeStudy = ref(0)
const sectiontwoLeft = ref(0)
const sectionSecservice = ref(0)
const sectionthreeLeft = ref(0)
const sectionSolution = ref(0)
const sectionCommerce = ref(0)
const sectionChannel = ref(0)
const sectionClassic = ref(0)
// 自动切换
const onSlideChange = (swiperObj: any, type: string) => {
    let index = swiperObj.activeIndex
    switch (type) {
        case 'mob':
            sectiononeMob.value = index
            break;
        case 'aistudy':
            sectiononeStudy.value=index
            break;
        case 'pc':
            sectiononeLeft.value = index
            break;
        case 'channel':
            sectionChannel.value = index
            break;
        case 'solution':
            sectionSolution.value = index
            break;
        case 'phone':
            sectiontwoLeft.value = index
            break;
        case 'classic':
            sectionClassic.value = index
            break;
        case "secservice":
            sectionSecservice.value=index
            break;
        case 'commerce':
            sectionCommerce.value = index
            break;
    }
}

// 手动切换
const HandleSlideChange = (indexVal: any, type: string) => {
    let index = indexVal
    if(indexVal=='stop'){
        swiperObjd.slideTo(sectiononeStudy.value, 100, false)
        return false
    }
    switch (type) {
        case 'mob':
            swiperObja.slideTo(index, 100, false)
            break;
        case 'aistudy':
            swiperObjd.slideTo(index, 100, false)
            break;
        case 'pc':
            swiperObje.slideTo(index, 100, false)
            break;
        case 'channel':
            swiperObjf.slideTo(index, 100, false)
            break;
        case 'solution':
            swiperObjc.slideTo(index, 100, false)
            break;
        case 'phone':
            sectiontwoLeft.value = index
            break;
        case 'classic':
            swiperObjl.slideTo(index, 100, false)
            break;
        case 'secservice':
            swiperObjk.slideTo(index, 100, false)
        case 'commerce':
            swiperObjj.slideTo(index, 100, false)
            break;
    }
}
const memberCenter = useMemberCenter()
const modules = [Autoplay, Pagination, Navigation]
definePageMeta({
    name: '/',
})
const squeenSpeed = ref(500000)

const indexUrl = '/api/index/home'
const {data} = await Http.fetch({
    url: indexUrl,
    method: 'get',
    params: {
        requiredLogin: 0,
    },
})
const meetDrawer = ref(false)
const meetHandle = () => {
    meetDrawer.value = true
}
const handleClose = (done: () => void) => {
    meetDrawer.value = false
    // ElMessageBox.confirm('Are you sure you want to close this?')
    //     .then(() => {
    //         done()
    //     })
    //     .catch(() => {
    //         // catch error
    //     })
}
const sectiontwo=data.value?data.value.data.sectiontwo:[]
const sections =data.value ? data.value.data.sections : []

const strTranTo = (valstr: any, key: any) => {
    let spiltval = valstr.split('|');
    return spiltval[key]
}
const fiterJumpurl = (url: string) => {
    if (url) {
        if (url.indexOf('http') == -1) {
            return url
        } else {
            return url
        }
    } else {
        return 'javascript:void(0)'
    }
}

const mobFreeShow = ref(false)
const mobFreeHandle = () => {
    mobFreeShow.value = true
}
</script>
<style scoped lang="scss">
.el-main {
    padding: 0;
}

.deep-ploughing {
    .mainContent {
        width: 1280px;
        margin: 0 auto;
    }
}


.slideItem_moduleContainer__Evlki {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    font-size: 50px;
    color: #fff;
    background-image: url('~/assets/tabcus-swiper-bg.png')
}

.swiper_moduleContainer__HNFuF .mySwiper {
    width: 913px;
    height: 390px
}
.tabsSwiper_moduleContainer__3zSXL {
    margin-top: 50px
}

.tabsSwiper_moduleContainer__3zSXL .mainContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol {
    width: 344px
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 24px;
    height: 140px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .25);
    cursor: pointer
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab:first-child {
    border-top: 1px solid hsla(0, 0%, 100%, .25)
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab:hover {
    background: hsla(0, 0%, 100%, .08);
    border: none
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab.active {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 15px rgba(88, 101, 133, .1);
    border-radius: 4px;
    background: hsla(0, 0%, 100%, .66);
    border: none;
    padding: 0 10px;
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab .nameRow {
    display: flex;
    flex-direction: row;
    height: 34px;
    align-items: center
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab .nameRow .icon-tab {
    display: block;
    width: 24px;
    height: 24px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab .nameRow .tabNameText {
    margin-left: 11px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .1em;
    color: #2441BF;
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab .descRow {
    margin-top: 13px;
    height: 28px;
    line-height: 28px
}

.tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab .descRow .tabNameText {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #fff
}

.moreCustomers_moduleContainer__69THv {
    //background-size: cover;
    //background-position: 50%;
    //background-repeat: no-repeat;
    //background-image: url(https://cdn.erp321.cn/jst-fed/07f59ed9-1cda-4783-aee5-14dea0169229_1920_680.jpg)
}

.moreCustomers_moduleContainer__69THv .customWrap {
    width: 100%;
    height: 680px;
    //background: rgba(36, 65, 191, 0.7);
}

.moreCustomers_moduleContainer__69THv .customWrap .mainContent {
    overflow: hidden
}

.moreCustomers_moduleContainer__69THv .customWrap .mainContent .mainTitleWrap {
    margin-top: 65px;
    height: 38px;
    line-height: 38px;
    text-align: center
}

.moreCustomers_moduleContainer__69THv .customWrap .mainContent .mainTitleWrap .mainTitleText {
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: .1em;
    color: #2441BF;
}

.moreCustomers_moduleContainer__69THv .customWrap .subTitleWrap {
    padding-top: 3px;
    height: 21px;
    line-height: 21px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.moreCustomers_moduleContainer__69THv .customWrap .subTitleWrap .subTitleText {
    font-style: normal;
    font-weight: 350;
    font-size: 14px;
    letter-spacing: .1em;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    color: #fff
}

.moreCustomers_moduleContainer__69THv .customWrap .subTitleWrap .icon-arrow-rgt {
    margin-left: 10px;
    width: 3.5px;
    height: 6px;
    display: block;
    background-image: url(https://files.erp321.com/pc-site/arrow-rgt-white.png);
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat
}


@media screen and (max-width: 1024px) {
    .lg\:max-w-96{
        max-width: 28rem !important;
    }
}
@media (min-width: 1024px) {
    .lg\:max-w-96 {
        max-width: 28rem;
    }
}
@media screen and (min-width: 768px) {
    .scoll-text{
        max-width: 730px;
    }
}


@media screen and (max-width: 750px) {
    .moreCustomers_moduleContainer__69THv {
        margin-top: 80px;
        //background-size: cover;
        //background-position: 50%;
        //background-repeat: no-repeat;
        //background-image: url(https://cdn.erp321.cn/jst-fed/07f59ed9-1cda-4783-aee5-14dea0169229_1920_680.jpg);

        .customWrap {
            width: 100%;
            height: auto;
           // background: rgba(43, 66, 109, 0.7);

            .mainContent {
                overflow: hidden;
                display: flex;
                flex-direction: column;
                width: 100%;

                .mainTitleWrap {
                    margin-top: 2rem;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;

                    .mainTitleText {
                        font-style: normal;
                        font-weight: 500;
                        font-size: 28px;
                        letter-spacing: 0.1em;
                        color: #2441BF;
                    }
                }

                .tabsSwiper_moduleContainer__3zSXL {
                    .main-module {
                        .tabsCol {
                            display: flex;

                            .nameRow {
                                .icon-tab {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }

            .subTitleWrap {
                padding-top: 3px;
                height: 21px;
                line-height: 21px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                .subTitleText {
                    font-style: normal;
                    font-weight: 350;
                    font-size: 14px;
                    letter-spacing: 0.1em;
                    -webkit-text-decoration-line: underline;
                    text-decoration-line: underline;
                    color: #fff;
                }

                .icon-arrow-rgt {
                    margin-left: 10px;
                    width: 3.5px;
                    height: 6px;
                    display: block;
                    background-image: url(https://files.erp321.com/pc-site/arrow-rgt-white.png);
                    background-size: contain;
                    background-position: 50%;
                    background-repeat: no-repeat;
                }
            }
        }
    }
    .tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab .nameRow .tabNameText {
         margin-left: 0px;
     }
    .ai-study-section{
        .mr-6{
            margin-right:0;
        }
    }
    .tabsSwiper_moduleContainer__3zSXL{
        margin-top:0;
    }
    .tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol .tab {
        padding-left: 0px;
        height: 40px;
    }
    .tabsSwiper_moduleContainer__3zSXL .mainContent .tabsCol {
        width: 100%;
        justify-content: space-around;
    }
    .classic-examples{
        .mr-3{
            margin-right:0;
        }
    }
    .swiper_moduleContainer__HNFuF .mySwiper {
        width: 390px;
        height: 260px;
    }
}

@media screen and (max-height: 650px) {
    .ai-study-section{
        .mr-6{
            margin-right:0;
        }
    }
    .classic-examples{
        .mr-3{
            margin-right:0;
        }
    }
}

.p-4 {
    margin-top: 5px;
}

.sectab-onebg{
    background: #2441BF;
}
.sectab-onebg-hover:hover{
    background: #2441BF !important;
    color:#fff;
}
.section-main13{
    padding-bottom: 144px;
    .technology-icon{
        width: 50px;
        height: 50px;
    }
    .technology-title{
        font-size: 16px;
    }
}
.bookpage-btn{
   --background: rgba(210, 210, 215, 0.4);
    justify-content: center;
    margin: 50px 0;
}
/**
  **手机版本样式
*/
@media only screen and (max-width: 769px) {
    .home-page{
        .section-header{
            .bottom-20{
                bottom:2rem;
            }
        }
        .section-main1{

        }
        .section-main2{
            .bookpage-btn{
                margin: 1.5rem 0;
            }
        }
        .mt-30{
            margin-top: 2rem;margin-bottom: 1rem;
        }
        .section-main3{

        }
        .pt-14{
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        .section-main4 {

        }

        .section-main5 {
            padding-top: 1rem;
            padding-bottom: 1rem;
            .mb-13{
                margin-bottom:1rem;
            }
        }
            .pt-30{
                padding-top: 1rem;
            }
        .section-main6 {
            .my-auto {
                margin-top: 1rem;
                margin-bottom: 1rem;
            }
        }
        .py-30 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        .section-main7 {
            margin:0;
            .mb-13{
                margin-bottom: 2rem;
            }
        }
        .pb-30{
            padding-bottom: 2rem;
        }
        .section-main8 {

        }

        .section-main9 {
            padding-top: 2rem;    padding-bottom: 2rem;
        }

        .section-main10 {

        }

        .section-main11 {

        }

        .section-main12 {

        }
        .section-main13{
            padding-bottom: 1rem;
            .mb-3{
                width: 50px;
            }
            .technology-icon{
                width: 50px;
                height: 50px;
            }
            .technology-title{
                font-size: 1.2rem;
                line-height: 2.2rem;
            }
        }
        .section-main14{
            margin-top: 0rem;
        }
    }
}
@media only screen and (max-width: 376px) {
    .xr-title{
        font-size: 0.8rem;
    }
}

</style>

